<template>
  <div>
    <img
      src="images/log1.png"
      alt=""
      style="float: left; margin-top: 20px; margin-left: 300px; width: 400px"
    />
    <div style="float: left; margin: 100px 20px">
      <span>会员登录</span
      ><span style="color: #ccc; font-size: 12px">Login</span>
      <form>
        <p>用户名: <input v-model="form.username" name="username" /></p>
        <p>
          密&nbsp;&nbsp;&nbsp;码:
          <input v-model="form.password" name="password" type="password" />
        </p>
        <p>
          验证码:
          <input type="text" v-model="msg" style="width: 60px" />&nbsp;&nbsp;
          <span
            style="
              line-height: 20px;
              display: inline-block;
              width: 60px;
              height: 20px;
              background-color: #999;
            "
            >8306</span
          >
          &nbsp;
          <a
            @click="Toast"
            href="JavaScript:void(0)"
            style="color: #999; text-decoration: none; font-size: 12px"
            >换个图片</a
          >
        </p>
        <p>
          <button
            @click.prevent="login"
            style="
              background-color: orange;
              color: white;
              border: none;
              width: 80px;
              height: 30px;
              margin-left: 30px;
            "
          >
            登录</button
          >&nbsp;
          <a
            href="/register"
            style="color: #999; font-size: 12px; text-decoration: none"
            >忘记密码?</a
          >
        </p>
        <p style="margin-top: 50px">
          <span style="font-size: 12px">你还不是名鞋库会员?</span>
          <router-link to="/register" style="color: red; font-size: 12px"
            >马上注册为会员</router-link
          >
        </p>
      </form>
      <img src="/images/log2.png" alt="" style="width: 400px" />
    </div>
    <img
      src="/images/log3.png"
      alt=""
      style="position: absolute; left: 300px; top: 520px; width: 800px"
    />
  </div>
</template>

<script>
import { Login } from '@/api/login'
import { Toast } from 'vant'
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      msg: ''
    }
  },
  methods: {
    Toast() {
      Toast('该功能未开发,请敬请期待!')
    },
    login() {
      if (this.msg == '' || this.msg == null) {
        Toast('请输入验证码!')
      } else if (this.msg != 8306) {
        Toast('请输入正确的验证码!')
      } else {
        Login(this.form)
          .then((res) => {
            console.log(res)
            Toast(res.data.msg)
            if (res.data.code == 1) {
              localStorage.setItem('token', res.data.token)
              localStorage.setItem('userinfo', JSON.stringify(res.data.data))
              setTimeout(() => {
                this.$router.push('/main')
              }, 1000)
            }
          })
          .catch((err) => {
            Toast(err.response.data.msg)
          })
      }
    }
  }
}
</script>

<style lang="less" scoped>
form {
  margin-top: 10px;
  width: 380px;
  height: 280px;
  border: 1px solid #ccc;
  text-align: center;
  padding: 10px;
}
form p {
  margin-top: 20px;
}
img {
  cursor: pointer;
}
</style>
